<template>
  <a-modal
    v-bind="$attrs"
    :width="817"
    cancelText="取消"
    okText="确定"
    :confirmLoading="loading"
    destroyOnClose
    :footer="null"
    ref="modalRef"
    @cancel="handleClickClose"
  >
    <a-form layout="vertical">
      <a-row :gutter="[10, 10]">
        <a-col :span="24">
          <a-form-item label="角色名称">
            <a-input />
          </a-form-item>
        </a-col>

        <!-- 权限列表 -->
        <template v-if="currentStep === 0">
          <a-col :span="24">
            <h6 class="u-flex u-row-between">
              <a-typography-title :level="5">权限列表</a-typography-title>
              <a-checkbox> 全选 </a-checkbox>
            </h6>
          </a-col>

          <a-col :span="24">
            <a-row>
              <a-col :span="8">
                <span class="f-w-600">Module</span>
              </a-col>
              <a-col :span="16">
                <span class="f-w-600">权限</span>
              </a-col>
            </a-row>
          </a-col>
          <a-divider style="margin: 1px"></a-divider>

          <template v-for="i in 10" :key="i">
            <a-col :span="24">
              <a-row>
                <a-col :span="8">
                  <span class="f-w-600">用户管理</span>
                </a-col>
                <a-col :span="16">
                  <a-checkbox> 全选 </a-checkbox>
                  <a-checkbox> 全选 </a-checkbox>
                  <a-checkbox> 全选 </a-checkbox>
                  <a-checkbox> 全选 </a-checkbox>
                  <a-checkbox> 全选 </a-checkbox>
                </a-col>
              </a-row>
            </a-col>
            <a-divider style="margin: 1px"></a-divider>
          </template>
        </template>

        <!-- 选择权限菜单 -->
        <template v-if="currentStep === 1">
          <a-col :span="24">
            <h6 class="u-flex u-row-between">
              <a-typography-title :level="5">菜单权限</a-typography-title>
              <a-checkbox> 全选 </a-checkbox>
            </h6>
          </a-col>

          <template v-for="i in 10" :key="i">
            <a-col :span="24">
              <a-row>
                <a-col :span="8">
                  <span class="f-w-600">用户管理</span>
                </a-col>
                <a-col :span="16">
                  <a-checkbox> 全选 </a-checkbox>
                  <a-checkbox> 全选 </a-checkbox>
                  <a-checkbox> 全选 </a-checkbox>
                  <a-checkbox> 全选 </a-checkbox>
                  <a-checkbox> 全选 </a-checkbox>
                </a-col>
              </a-row>
            </a-col>
            <a-divider style="margin: 1px"></a-divider>
          </template>
        </template>

        <!-- 选择侧边菜单 -->
        <template v-if="currentStep === 2">
          <a-col :span="24">
            <h6 class="u-flex u-row-between">
              <a-typography-title :level="5">侧边栏菜单</a-typography-title>
              <a-checkbox> 全选 </a-checkbox>
            </h6>
          </a-col>

          <template v-for="i in 10" :key="i">
            <a-col :span="24">
              <a-row>
                <a-col :span="8">
                  <span class="f-w-600">用户管理</span>
                </a-col>
                <a-col :span="16">
                  <a-checkbox> 全选 </a-checkbox>
                  <a-checkbox> 全选 </a-checkbox>
                  <a-checkbox> 全选 </a-checkbox>
                  <a-checkbox> 全选 </a-checkbox>
                  <a-checkbox> 全选 </a-checkbox>
                </a-col>
              </a-row>
            </a-col>
            <a-divider style="margin: 1px"></a-divider>
          </template>
        </template>
      </a-row>
    </a-form>

    <div class="u-text-right u-m-t-20">
      <template v-if="currentStep === 0">
        <a-button danger ghost class="u-m-r-20" @click="handleClickClose"
          >取消</a-button
        >
        <a-button type="primary" ghost @click="handleClickNext(1)"
          >下一步</a-button
        >
      </template>
      <template v-if="currentStep === 1">
        <a-button danger ghost class="u-m-r-20" @click="handleClickPrev(0)"
          >上一步</a-button
        >
        <a-button type="primary" ghost @click="handleClickNext(2)"
          >下一步</a-button
        >
      </template>
      <template v-if="currentStep === 2">
        <a-button danger ghost class="u-m-r-20" @click="handleClickPrev(1)"
          >上一步</a-button
        >
        <a-button type="primary" ghost :loading="loading">确认</a-button>
      </template>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from "vue";
interface Props {
  loading?: boolean;
  permissionsList?: Array<any>;
  urlsList?: Array<any>;
}

const currentStep = ref<number>(0);

const modalRef = ref<any>(null);

const emits = defineEmits<{
  (e: "close"): void;
  (e: "update:visible", payload: boolean): void;
  (e: "stepchange", payload: number): void;
  (e: "confirm", payload: any): void;
}>();

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  permissionsList: () => [],
  urlsList: () => [],
});

const handleClickClose = () => {
  emits("update:visible", false);
};

const handleClickPrev = (step: number) => {
  currentStep.value = step;
  emits("stepchange", currentStep.value);
};

const handleClickNext = (step: number) => {
  currentStep.value = step;
  emits("stepchange", currentStep.value);
};

const handleClickConfirm = () => {
  emits("confirm", {});
};
</script>
